<template>
  <section v-loading="loading">
    <el-tabs v-model="clickTab" v-if="currReport" @tab-click="handleClick">
      <!--<div v-for="item in currReport.reportItems" :key="item.id">-->
        <!--<el-tab-pane :label="item.reportModule.title" :name="item.reportModule.code">-->
          <!--<el-form label-width="100px"  v-if="clickTab === 'No.1'">-->
            <!--<el-form-item v-for="d in item.data.vals" :key="d.code" :label="d.title">-->
              <!--<el-input v-model="d.val" size="mini"></el-input>-->
            <!--</el-form-item>-->
            <!--<el-form-item>-->
              <!--<el-button @click="savePage(item)" size="mini">测试·保存</el-button>-->
            <!--</el-form-item>-->
          <!--</el-form>-->
          <!--<No2 v-if="clickTab === 'No.2'" :item="item"></No2>-->
          <!--<No3 v-else-if="clickTab == 'No.3'" :item="item"></No3>-->
        <!--</el-tab-pane>-->
      <!--</div>-->
      <el-tab-pane v-for="item in currReport.reportItems" :label="item.reportModule.title" :name="item.reportModule.code" :key="item.id">
        <div v-if="clickTab === 'No.1'&& item.reportModule.code === 'No.1'">
          <el-form label-width="100px">
            <el-form-item v-for="(d,i) in item.data.vals" :key="i" :label="d.title">
              <el-input v-model="d.val" size="mini"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="savePage(item)" size="mini">测试·保存</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div v-else-if="clickTab === 'No.2' && item.reportModule.code === 'No.2'">
          <No2 :item="item" v-on:save="savePage(item)"> </No2>
        </div>
        <div v-else-if="clickTab == 'No.3' && item.reportModule.code === 'No.3'">
          <No3 :item="item" v-on:save="savePage(item)"></No3>
        </div>
        <div v-else-if="clickTab == 'No.4' && item.reportModule.code === 'No.4'">
          <No4 :item="item" v-on:save="savePage(item)"></No4>
        </div>
        <div v-else-if="clickTab == 'No.5' && item.reportModule.code === 'No.5'">
          <No5 :item="item" v-on:save="savePage(item)"></No5>
        </div>
        <div v-else-if="clickTab == 'No.6' && item.reportModule.code === 'No.6'">
          <No6 :item="item" v-on:save="savePage(item)"></No6>
        </div>
        <div v-else-if="clickTab == 'No.7' && item.reportModule.code === 'No.7'">
          <No7 :item="item" v-on:save="savePage(item)"></No7>
        </div>
        <div v-else-if="clickTab == 'No.8' && item.reportModule.code === 'No.8'">
          <No8 :item="item" v-on:save="savePage(item)"></No8>
        </div>
        <div v-else-if="clickTab == 'No.9' && item.reportModule.code === 'No.9'">
          <No9 :currReport="currReport" :item="item" v-on:save="savePage(item)"></No9>
        </div>
        <div v-else-if="clickTab == 'No.10' && item.reportModule.code === 'No.10'">
          <No10 :currReport="currReport" :item="item" v-on:save="savePage(item)"></No10>
        </div>
      </el-tab-pane>
    </el-tabs>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import DateFormat from '@/common/date-formater'
  import errHandler from '@/assets/errHandler.js'
  import No2 from './reportModule/No2'
  import No3 from './reportModule/No3'
  import No4 from './reportModule/No4'
  import No5 from './reportModule/No5'
  import No6 from './reportModule/No6'
  import No7 from './reportModule/No7'
  import No8 from './reportModule/No8'
  import No9 from './reportModule/No9'
  import No10 from './reportModule/No10'
  export default {
    name: "report",
    components: {No2,No3,No4,No5,No6,No7,No8,No9,No10},
    data() {
      return {
        clickTab:'',
        importMessage:'',
        importPercentage:0,
        showDialog:false,
        selModules:[],
        moduleList:null,
        currExamine:null,
        reportDetail:{},
        loading:false,
        currReport:null,
        physicalList:null,
      }
    },
    watch: {
      clickTab(nv,ov){

      },
    },
    created(){
      //获取下当前报告
      this.getReport(this.$route.params.reportId)
      // this.getExamine(this.$route.params.id)
    },
    computed:{
      ...mapGetters(['department']),
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      selPhysical(vals,id){
        let tmp = this.physicalList.find(p=>p.id===id)
        vals.forEach(v=>{
          for(let key in tmp){
            if(key === v.code){
              v.val=tmp[key]
            }
          }
        })
      },
      handleClick(t){
        console.log(this.clickTab)
      },
      getReport(id){
        console.log(id)
        this.fetch({name:"getReport",data:{id}})
          .then(res=>{
            console.log(res)
            this.currReport=res
            this.clickTab = res.reportItems[0].reportModule.code
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      savePage(item){
        console.log(item)
        this.loading=true
        let data={id:item.id,data:JSON.stringify(item.data)}
        // console.log(data)
        this.saveReportItem(data)
      },
      saveReportItem(data){
        this.fetch({name:"saveReportItem",data})
          .then(res=>{
            this.loading=false
            console.log(res)
          })
          .catch(err=>{
            console.log(err)
            this.saveReportItem(data)
            errHandler.handle(this,err)
          })
      }
    }
  }
</script>

<style scoped>

</style>
